<template>
    <el-drawer
        v-model="showDrawer"
        :title="drawerTitle"
        direction="rtl"
        @close="closeFn"
        :size="423"
    >
       <div class="">
           <el-form                
                :model="form"
                label-width="90px"                
            >
                <el-form-item label="物料编号:" >                    
                    <el-input size="small" placeholder="请填写物料编号" :disabled="true"  v-model="form.materialCode"></el-input>
                </el-form-item>               
                <el-form-item label="物料名称:" >
                    <el-input size="small" placeholder="请填写物料名称" :disabled="true"  v-model="form.materialName"></el-input>
                </el-form-item>
                <el-form-item label="物料单位:" >
                    <el-input size="small" placeholder="请填写物料单位" :disabled="true"  v-model="form.materialUnit"></el-input>                    
                </el-form-item>
                <el-form-item label="物料类型:" >
                    <el-input size="small" placeholder="请填写物料类型" :disabled="true" v-model="form.materialType"></el-input>                    
                </el-form-item>
                <el-form-item label="库存量:" >
                    <el-input size="small" placeholder="请填写物料类型" :disabled="true" v-model="form.materialCount"></el-input>                    
                </el-form-item>
                
                <div class="tab-box">
                    <el-button-group>
                        <el-button size="small" @click="inRecordFn(1)" :type="tabType===1?'primary':'default'">入库记录</el-button>
                        <el-button size="small" @click="inRecordFn(2)" :type="tabType===2?'primary':'default'">
                            出库记录
                        </el-button>
                    </el-button-group>
                </div>
                <div>
                    <el-table :data="materialRecords" border size="small" v-show="tabType===1">                        
                        <el-table-column prop="checkTime" align="center" label="入库时间"></el-table-column>
                        <el-table-column prop="inStoreCode" align="center" label="入库单号"></el-table-column>   
                        <el-table-column prop="planQuantity" align="center" label="数量"></el-table-column>   
                    </el-table>
                    <el-table :data="materialOutRecords" border size="small" v-show="tabType===2">                        
                        <el-table-column prop="outStoreTime" align="center" label="出库时间"></el-table-column>
                        <el-table-column prop="outStoreCode" align="center" label="出库单号"></el-table-column>   
                        <el-table-column prop="outStoreNum" align="center" label="数量"></el-table-column>   
                    </el-table>
                </div>
           </el-form>
       </div>
       <div class="drawer-footer-box">
           <el-button size="small" @click="closeFn">取消</el-button>
           <!-- <el-button type="primary" size="small" :loading="isLoading" @click="submitInfo">确定</el-button> -->
        </div>
    </el-drawer>
</template>
<script>
import {onMounted, reactive, ref, toRefs} from 'vue'
import axios from 'axios'
export default {
    name: 'productDrawer',
    props: {
       showDrawer: {
           type: Boolean,
           default: false,
           required: false
       },
       drawerTitle: {
           type: String,
           default: '新增',
           required: false
       }       
    },
    emits: ['closeDrawerFn'],
    setup(props, {emit}){
        let data  = reactive({
          form: {
              produceCode: '',
              produceName: '',
              produceSpecs: '',
              planNum: '',
              produceType: ''
          },
          produceList: [
              {
                  id: 1,
                  name: '电冰箱',
                  produceCode: 'CP20211215001'
              },
              {
                  id: 2,
                  name: '空调',
                  produceCode: 'CP20211215001'
              }
          ],
          isLoading: false,
          tabType: 1,
          materialRecords: [],
          materialOutRecords: []
        })     
        function afterShowDrawer(rowData){           
            data.form = Object.assign({}, rowData)
            // console.log('rowData',rowData)
            if(JSON.stringify(rowData) !== '{}'){
                getInStoreRecordFn(rowData.id)
                getOutStoreRecordFn(rowData.id)
            }            
        }
        async function getInStoreRecordFn(id){
            let res = await axios.get('/inManageInfoList')
            // console.log(data)
            let list = res.data,
                records = []
            if(list.success){               
                records = list.result.filter(item=>{
                    return item.materialId === id
                })
                data.materialRecords = records
            }
            // console.log(' data.materialRecords',list.result)
        }
        async function getOutStoreRecordFn(id){
            let res = await axios.get('/outStoreList')
            // console.log(data)
            let list = res.data.result.list,
                records = []
            if(res.data.success){               
                records = list.filter(item=>{
                    return item.materialId === id
                })
                data.materialOutRecords = records
            }
            // console.log(' data.materialRecords',list.result)
        }
        function closeFn(){
            emit('closeDrawerFn')
        }
        function submitInfo(){
            data.isLoading = true
                      
            // console.log(data.isLoading)
            // console.log('提交数据')
        }
        function changeProduce(val){
            // console.log('选中值', val) 
            let index = data.produceList.findIndex((item)=>{
                return item.id === val
            })           
            data.form.produceCode = data.produceList[index].produceCode
            // console.log('index', index)
        }
        function inRecordFn(type){
           data.tabType = type
        }
        return {                     
            ...toRefs(data),          
            afterShowDrawer,  
            closeFn,
            submitInfo,
            changeProduce,
            getInStoreRecordFn,
            inRecordFn,
            getOutStoreRecordFn
        }    
    }
}
</script>
<style>
    .tab-box{
        margin-bottom: 10px;
    }
</style>